<template>
	<view>
		<Index v-if="PageCur==0"></Index>
		<Serve v-if="PageCur==1"></Serve>
		<Wisdom v-if="PageCur==2"></Wisdom>
		<Me v-if="PageCur==3"></Me>
		<view class="tabbar-box">
			<view class="box-f">
				<view @click="NavChange(index)" :class="['action','itemAction'+(index+1)]" v-for="(item,index) in tabbarInfo"
					:key="index">
					<view class="img-box">
						<image :src="item.img"></image>
					</view>
					<text>{{item.text}}</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import Index from "./index.vue";
	import Serve from "./serve.vue";
	import Wisdom from "./wisdom.vue";
	import Me from "./me.vue";
	export default {
		components:{
			Index,Serve,Wisdom,Me
		},
		data() {
			return {
				PageCur: 0,
				tabbarInfo: [{
						text: "首页",
						img: "../../static/images/index.png",
						activeImg: "../../static/images/index_cur.png"
					},
					{
						text: "服务",
						img: "../../static/images/shop.png",
						activeImg: "../../static/images/shop_cur.png"
					},
					{
						text: "智慧",
						img: "../../static/images/index.png",
						activeImg: "../../static/images/index_cur.png"
					},
					{
						text: "我的",
						img: "../../static/images/order.png",
						activeImg: "../../static/images/order_cur.png"
					}
				]
			};
		},
		methods: {
			NavChange(index) {
				console.log(index);
				this.PageCur = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-box {
		position: relative;
	}

	.box-f {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(50px + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.action {
			font-size: 11px;
			position: relative;
			flex: 1;
			text-align: center;
			padding: 0;
			display: block;
			height: auto;
			line-height: 1;
			margin: 0;
			background-color: inherit;
			overflow: initial;

			image {
				width: 25px;
				height: 25px;
				display: inline-block;
			}
		}
	}
</style>